<clr-modal [(clrModalOpen)]="opened" [clrModalClosable]=false>:
    <h3 class="modal-title">{{'APP_ZONE_EDIT'|translate}}</h3>
    <div class="modal-body">
        <div *ngIf="item">
            <form clrForm #editForm='ngForm'>
                <div *ngIf="item.provider === 'vSphere' || item.provider === 'FusionCompute'">
                    <clr-radio-container clrInline>
                        <label>{{'APP_DATASTORE_TYPE'|translate}}</label>
                        <clr-radio-wrapper>
                            <input type="radio" clrRadio name="DatastoreType" required value="value"
                                   checked="checked"
                                   [(ngModel)]="item.cloudVars['datastoreType']"/>
                            <label>{{'APP_DATASTORE_TYPE_VALUE'|translate}}</label>
                        </clr-radio-wrapper>
                        <clr-radio-wrapper>
                            <input type="radio" clrRadio name="datastoreType" required value="usage"
                                   [(ngModel)]="item.cloudVars['datastoreType']"/>
                            <label>{{'APP_DATASTORE_TYPE_USAGE'|translate}}</label>
                        </clr-radio-wrapper>
                        <clr-control-helper>
                            <span *ngIf="item.cloudVars['datastoreType'] === 'value'"> {{'APP_DATASTIORE_VALUE_HELPER'|translate}}</span>
                            <span *ngIf="item.cloudVars['datastoreType'] === 'usage'">{{'APP_DATASTIORE_USAGE_HELPER'|translate}}</span>
                        </clr-control-helper>
                    </clr-radio-container>
                    <clr-select-container>
                        <label>{{'APP_DATASTORE'|translate}}</label>
                        <select [(ngModel)]="newDatastores" name="datastore" multiple clrSelect>
                            <option value="" disabled>{{'APP_DEFAULT_OPTION'|translate}}</option>
                            <option *ngFor="let datastore of cloudDatastores"
                                    [value]="datastore.name">{{datastore.name}}</option>
                        </select>
                        <clr-control-error>{{'APP_REQUIRED_ERROR'|translate}}</clr-control-error>
                        <clr-control-helper>{{'APP_UPDATE_DATASTORE_HELPER'|translate}}</clr-control-helper>
                    </clr-select-container>
                </div>
                <clr-select-container>
                    <label>{{'APP_IP_POOL'|translate}}</label>-->
                    <select [(ngModel)]="item.ipPoolName" name="ipPool" required clrSelect
                            (ngModelChange)="changeIpPool(item.ipPoolName)">
                        <option value=''>{{'APP_DEFAULT_OPTION'|translate}}</option>
                        <option *ngFor="let ipPool of ipPools"
                                [value]="ipPool.name">{{ipPool.name}}</option>
                    </select>
                    <clr-control-error>{{'APP_REQUIRED_ERROR'|translate}}</clr-control-error>
                </clr-select-container>
                <table class="table table-vertical table-noborder table-compact"
                       *ngIf="currentPool&&currentPool.name != ''">
                    <tbody>
                    <tr>
                        <th>{{'APP_NAME'|translate}}</th>
                        <td>{{currentPool.name}}</td>
                    </tr>
                    <tr>
                        <th>{{'APP_SUBNET'|translate}}</th>
                        <td>{{currentPool.subnet}}</td>
                    </tr>
                    <tr>
                        <th>{{'APP_NETWORK_GATEWAY'|translate}}</th>
                        <td *ngIf="currentPool.ips.length >0 ">{{currentPool.ips[0].gateway}}</td>
                    </tr>
                    <tr>
                        <th>{{'APP_NETWORK_DNS1'|translate}}</th>
                        <td *ngIf="currentPool.ips.length >0 ">{{currentPool.ips[0].dns1}}</td>
                    </tr>
                    <tr>
                        <th>{{'APP_NETWORK_DNS2'|translate}}</th>
                        <td *ngIf="currentPool.ips.length >0 ">{{currentPool.ips[0].dns2}}</td>
                    </tr>
                    <tr>
                        <th>{{'APP_STATUS'|translate}}</th>
                        <td>{{currentPool.ipUsed}}/{{currentPool.ips.length}}</td>
                    </tr>
                    </tbody>
                </table>
            </form>
            <div class="modal-footer">
                <button type="button" class="btn" (click)="onCancel()">{{'APP_CANCEL'|translate}}</button>
                <button type="button" class="btn btn-primary" (click)="onConfirm()"
                        [disabled]="editForm.invalid">
                    {{'APP_COMMIT'|translate}}
                </button>
            </div>
        </div>
    </div>

</clr-modal>
